<template>
	<view>
    <view class="filter">
      <div class="item">全部</div>
      <div class="item" :class="[ f1 ? 'up' : 'down' ]" @click="f1=!f1">
        <view>销量</view>
        <view class="icon"></view>
      </div>
      <div class="item down">
        <view>价格</view>
        <view class="icon"></view>
      </div>
      <div class="item up">
        <view>距离</view>
        <view class="icon"></view>
      </div>
      <div class="item" @click="shaixuan=!shaixuan">筛选</div>
    </view>
    
    <shaixuan v-model="shaixuan"></shaixuan>
  </view>
</template>

<script>
  import shaixuan from '../../../components/shaixuan.vue'
	export default {
    components: {
      shaixuan
    },
		data() {
			return {
				f1: false,
        shaixuan: false
			};
		}
	}
</script>

<style lang="scss">
  .filter {
    width: 750rpx;
    height: 100rpx;
    display: flex;
    
    .item {
      flex-grow: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #967658;
      line-height: 1em;
      
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
    
    .up .icon {
      background: url(../../../static/icons/fup.png) center / cover;
    }
    
    .down .icon {
      background: url(../../../static/icons/fdown.png) center / cover;
    }
  }
</style>
